<template>
    <div class="list">
        <div style="flex: 1;overflow: auto;">
            <a-table :data="list" class="table" ref="tableRef" v-bind="$attrs" :pagination="false" :scroll="{ x: '100%', y: '100%' }">
                <template #columns>
                    <slot></slot>
                </template>
            </a-table>
        </div>
        <div class="pagination" v-if="count">
            <a-pagination size="small" :total="count" v-model:current="data.page" v-model:page-size="data.pageSize" @change="refresh" :disabled="loading" @page-size-change="refresh"
                show-total show-jumper show-page-size></a-pagination>
        </div>
    </div>
</template>

<script lang='ts' setup>
const tableRef = ref()
const emit = defineEmits(['refresh'])
const loading = defineModel('loading', { default: false })
const list = defineModel('list', { default: [] })
const count = defineModel('count', { default: 0 })
const data = defineModel('data', { default: {} as any })
const refresh = () => {
    emit('refresh')
}

const expand = (index: number) => {
    tableRef.value?.expand(index)
}
defineExpose({ expand })
</script>

<style scoped lang="less">
.list {
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: var(--menu-bg-color);
    display: flex;
    flex-direction: column;

    .table {
        width: 100%;
        height: 100%;
        overflow: auto;
    }

    :deep(.arco-table) {
        .arco-table-header {
            background-color: var(--color-fill-2) !important;
        }

        // .arco-table-th {
        //     background-color: unset !important;
        // }

        .arco-table-body {
            background-color: unset !important;
        }

        .arco-btn-size-medium {
            padding: 0 5px !important;
        }

        .arco-btn-text,
        .arco-btn-text[type='button'],
        .arco-btn-text[type='submit'] {
            color: var(--botton-bg-color) !important;
            border-radius: 4px !important;
        }

        .arco-btn-text.arco-btn-status-danger {
            color: #ca0303 !important;
            border-radius: 4px !important;
        }

        .arco-btn-outline,
        .arco-btn-outline[type='button'],
        .arco-btn-outline[type='submit'] {
            color: (var(--gray-10)) !important;
            border: none !important;
            border-radius: 4px !important;
        }

        .arco-btn-size-mini {
            padding: 0 !important;
        }

        .arco-table-td {
            background-color: var(--menu-bg-color) !important;
            color: var(--color-neutral-8) !important;
        }
    }

    :deep(.arco-table-border .arco-table-container) {
        border: unset !important;
    }

    :deep(.arco-color-picker-size-large) {
        height: 26px;
        padding: 0;
    }

}

.pagination {
    display: flex;
    justify-content: center;
    padding: 10px 16px;
    border-top: 1px solid var(--main-border-color);
}
</style>